<template>
	<view class="inventory">
		<watermark></watermark>
		<scroll-view scroll-y @scrolltolower="getMore">
			<view class="goods  zyjz f26 cl343 flex-start-c " v-for="(item,int) in items" :key="int">
				<image :src="item.img" mode="widthFix"></image>
				<view class="mgn-l-20" style="width:68%">
					<view class="omit1">
						{{item.goods_name}}
					</view>
					<view class="zyjz mgn-t-30 mgn-b-40 space-between">
						<uni-number-box v-model="item.num" :max="item.realityNum" />
						<view class="f24 clAAA">{{item.realityNum}}</view>
					</view>
					<textarea placeholder="请填写原因，有数量改变则必填" v-model="item.note" />
				</view>
			</view>
			<view class="" style="height: 200rpx;"></view>
		</scroll-view>
		<view class="bottom zyjz pad-l-40 pad-t-20 pad-b-20 pad-r-20 bgfff f28 cl343">
			<button style="width: 100%;" type="primary" hover-class="none" @click="onSub">提交盘点（需等待管理员审核）</button>
		</view>

		<uni-popup ref="alertDialog" type="dialog">
			<view class="upLoad ">
				<view class="pad30 pad-b-60">
					<uni-file-picker v-model="imageValue" fileMediatype="image" mode="grid" @select="selectImg" @delete="delImg"
						:limit="9" />
				</view>
				<view class="zyjz btns f28">
					<view class="btn border-right" @click="$refs.alertDialog.close()">
						取消
					</view>
					<view class="btn cl3e8" @click="onSubmit">
						确定
					</view>
				</view>
			</view>

		</uni-popup>
	</view>
</template>

<script>
	import watermark from '@/components/watermark.vue'
	import mixins from '@/mixins/index.js'
	export default {
		mixins: [mixins],
		components: {
			watermark
		},
		data() {
			return {
				lists_url: 'goods',
				param: {
					page: 1,
					size: 20,
					w_id: null
				},
				items: [],
				w_id: '',
				imageValue: []
			}
		},
		onLoad(e) {
			if (e && e.w_id) {
				this.w_id = e.w_id
				this.param.w_id = e.w_id
				this.get_lists(() => {
					for (let i in this.items) {
						this.$set(this.items[i], 'realityNum', this.items[i].num)
						this.$set(this.items[i], 'note', '')
					}
				});
			}
		},
		methods: {
			selectImg(e) {
				this.imageValue.push(e.tempFiles[0])
			},
			delImg(e) {
				for (let i in e.imageValue) {
					if (this.imageValue[i].uuid === e.tempFile.uuid) {
						this.imageValue.splice(i, 1)
						return
					}
				}
			},
			onSubmit() {
				for (let i in this.items) {
					const v = this.items[i]
					if (v.num != v.realityNum && !v.note) {
						this.api.msg('数量有改变需填写原因')
						return
					}
				}
				let obj = {
					input: this.items,
					img: ''
				}
				let imgs = []
				imgs = this.imageValue.map(v => {
					return this.api.upload([v.file])
				})
				Promise.all(imgs).then(res => {
					console.log(res);
					let img = []
					res.forEach(v => {
						img.push(v.data[0].path)
					})
					obj.img = img.join(',')
					this.api.post('warehouse_count', obj).then(res => {
						this.api.msg(res.msg)
						setTimeout(() => {
							this.back()
						}, 2000)
					})
				})
			},
			onSub() {
				this.$refs.alertDialog.open()
			}
		}
	}
</script>

<style lang="less">
	.inventory {
		textarea {
			width: 95%;
			height: 100rpx;
			padding: 10rpx;
			border: 1px solid #eee;
		}

		.goods {
			position: relative;
			padding: 20rpx 0;
			margin: 0 20rpx;
			border-bottom: 1px solid #f7f7f7;

			.out {
				position: absolute;
				top: 20rpx;
				left: 0rpx;

				image {
					width: 48rpx;
					height: 48rpx;
				}

				text {
					position: absolute;
					top: 10rpx;
					left: 5rpx;
				}
			}

			image {
				width: 200rpx;
				height: 150rpx;
			}

			.clff0 {
				color: #FF0000;
			}
		}

		.upLoad {
			width: 630rpx;
			min-height: 372rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.16);
			border-radius: 8rpx 8rpx 8rpx 8rpx;

			.btns {
				border-top: 1px solid rgba(0, 0, 0, 0.1);

				.btn {
					width: 315rpx;
					padding: 30rpx 0;
					text-align: center;

				}

				.border-right {
					border-right: 1px solid rgba(0, 0, 0, 0.1);
				}
			}
		}
	}
</style>